<template>
  <div>
    <MyHeader title="购物车案例"></MyHeader>
    <div class="main">
      <MyGoods :data="list" @change="change">  <!-- 渲染页面 -->
        <template #count="{ item }">
          <MyCount v-model="item.goods_count"></MyCount>
        </template>
      </MyGoods>
    </div>
    <MyFooter>
      <!-- 全选 -->
      <template #all>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" v-model="isAll" class="custom-control-input" id="footerCheck">
          <label class="custom-control-label" for="footerCheck">全选</label>
        </div>
      </template>

      <!-- 合计 -->
      <template #sum>
        <div>
          <span>合计:</span>
          <span class="price">¥ {{ total }}</span>
        </div>
      </template>

      <!-- 按钮 -->
      <template #btn>
        <button type="button" class="footer-btn btn btn-primary">结算 ( {{ listSum }} )</button>
      </template>
    </MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
import MyCount from './components/MyCount'
export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
    MyCount
  },
  data() {
    return {
      list: [
        {
          id: 1,
          goods_name:
            '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣',
          goods_img: 'https://www.escook.cn/vuebase/pics/1.png',
          goods_price: 108,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 2,
          goods_name:
            '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮',
          goods_img: 'https://www.escook.cn/vuebase/pics/2.png',
          goods_price: 129,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 3,
          goods_name:
            '思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套',
          goods_img: 'https://www.escook.cn/vuebase/pics/3.png',
          goods_price: 198,
          goods_count: 1,
          goods_state: false,
        },
        {
          id: 4,
          goods_name:
            '思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套',
          goods_img: 'https://www.escook.cn/vuebase/pics/4.png',
          goods_price: 99,
          goods_count: 1,
          goods_state: false,
        },
        {
          id: 5,
          goods_name:
            '幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮',
          goods_img: 'https://www.escook.cn/vuebase/pics/5.png',
          goods_price: 156,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 6,
          goods_name: 'ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女',
          goods_img: 'https://www.escook.cn/vuebase/pics/6.png',
          goods_price: 142.8,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 7,
          goods_name:
            '幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套',
          goods_img: 'https://www.escook.cn/vuebase/pics/7.png',
          goods_price: 219,
          goods_count: 2,
          goods_state: true,
        },
        {
          id: 8,
          goods_name:
            '依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套',
          goods_img: 'https://www.escook.cn/vuebase/pics/8.png',
          goods_price: 178,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 9,
          goods_name:
            '芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬',
          goods_img: 'https://www.escook.cn/vuebase/pics/9.png',
          goods_price: 128,
          goods_count: 1,
          goods_state: false,
        },
        {
          id: 10,
          goods_name:
            'Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫',
          goods_img: 'https://www.escook.cn/vuebase/pics/10.png',
          goods_price: 153,
          goods_count: 1,
          goods_state: false,
        },
      ],
      // isAll: false  // 是否全选
      // sum: 0  // 合计
    }
  },
  computed: {
    // 全选
    isAll: {
      // 全都选中，全选框改变
      get() {
        return this.list.every(item => item.goods_state === true)
      },
      set(val) {
        this.list.forEach(item => item.goods_state = val)
      }
    },
    // 合计
    total: {
      get() {
        // 先过滤出选中的数组，再求和
        return this.list.filter(item => item.goods_state).reduce((sum, item) => sum + item.goods_count * item.goods_price, 0)
      }
    },
    // 结算
    listSum: {
      get() {
        return this.list.filter(item => item.goods_state === true).reduce((sum, item) => sum + item.goods_count, 0)
      }
    }
  },
  methods: {
    // 复选框改变
    change(id, val) {
      this.list.find(item => item.id === id).goods_state = val
    }
  }
}
</script>

<style>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>